<template>
<!-- // 暂时不用 -->
  <div>
    <a-list>
      <a-list-item v-for="(ag, index) in sortedList" :key="index"><a-icon type="link" :style="{color: getColor(ag.beginTime, ag.endTime)}"/> 合同有效期：{{ag.beginTime}} ~ {{ag.endTime}} <a @click="checkAgreement(index)">查看</a></a-list-item>
    </a-list>
      <agreement-view-modal
        :visible="agreementViewVisible"
        :agreement="custInfoContract"
        @set-agview-visible="setAgreementViewVisible"/>
  </div>
</template>

<script>
export default {
  name: 'sorted-contract',
  props: {
    list: Array
  },
  data () {
    return {
      agreementViewVisible: false,
      sortedList: []
    }
  },
  methods: {
    getColor (beginTime, endTime) {
      const isOver = new Date(`${endTime} 23:59:59`).getTime() < new Date().getTime() || new Date(`${beginTime}`).getTime() > new Date().getTime()
      return isOver ? 'grey' : '#1890ff'
    },
    checkAgreement (index) {
      this.agreementViewVisible = true
      this.custInfoContract = Object.assign({}, this.detail.custInfoContractList[index])
    },
    setAgreementViewVisible (visible) {
      this.agreementViewVisible = visible
    }
  },
  mounted () {
    if (this.list.length > 0) {
      this.sortedList = this.list.sort((a, b) => {
        return (new Date(a.beginTime) - new Date(b.beginTime)) && (new Date(a.endTime) - new Date(b.endTime))
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
